import {
  AlipayCircleOutlined,
  LockOutlined,
  MobileOutlined,
  TaobaoCircleOutlined,
  UserOutlined,
  ArrowLeftOutlined,
} from '@ant-design/icons';
import {
  LoginForm,
  ProFormCaptcha,
  ProFormCheckbox,
  ProFormText,
  ProConfigProvider,
} from '@ant-design/pro-components';
import { message, Space, Tabs } from 'antd';
import { useState } from 'react';
import './index.less';
import { history } from '@umijs/max';
import { doFetch } from '@/utils/doFetch';
import AES from 'crypto-js/aes';
import ECB from 'crypto-js/mode-ecb';
import Pkcs7 from 'crypto-js/pad-pkcs7';
import Utf8 from 'crypto-js/enc-utf8';

const iconStyles = {
  marginInlineStart: '16px',
  color: 'rgba(0, 0, 0, 0.2)',
  fontSize: '24px',
  verticalAlign: 'middle',
  cursor: 'pointer',
};

export default () => {
  const [loginType, setLoginType] = useState('account');
  return (
    <div className="bg">
      <ul className="circles">
        {new Array(10).fill('').map((it) => (
          <li key={it} />
        ))}
      </ul>
      <div style={{ position: 'absolute', width: '100%', zIndex: 99999 }}>
        <LoginForm
          logo="./logo.png"
          subTitle={
            <>
              <p style={{ fontSize: 17, marginBottom: 0 }}>
                <b>江苏南高智能装备创新中心有限公司</b>
              </p>
              <p style={{ fontSize: 12, zoom: 0.8, margin: 0 }}>
                Jiangsu Nangao Intelligent Equipment Innovation Center Co., Ltd.
              </p>
            </>
          }
          onFinish={(values) => {
            let timestamp = new Date().getTime() + 'acb';
            let newtimestamp = AES.encrypt(
              timestamp,
              Utf8.parse('NANGAODEAESKEY--'),
              {
                mode: ECB,
                padding: Pkcs7,
              },
            ).toString();
            let password = AES.encrypt(values.password, Utf8.parse(timestamp), {
              mode: ECB,
              padding: Pkcs7,
            }).toString();
            const postdata = {
              accountName: values.username,
              password: password,
              encryptKey: newtimestamp,
            };
            doFetch({
              url: '/ngic-auth/sysAccount/login',
              params: postdata,
            }).then((res) => {
              if (res.code === '0000') {
                let token = res?.data?.token;
                localStorage.setItem('TOKENES', token);
                message.success('🎉 🎉 🎉  登录成功！');
                history.push('/');
                return;
              }
            });
          }}
        >
          {loginType === 'account' && (
            <>
              <ProFormText
                name="username"
                fieldProps={{
                  size: 'large',
                  prefix: <UserOutlined className={'prefixIcon'} />,
                }}
                placeholder={'用户名: admin or user'}
                rules={[
                  {
                    required: true,
                    message: '请输入用户名!',
                  },
                ]}
              />
              <ProFormText.Password
                name="password"
                fieldProps={{
                  size: 'large',
                  prefix: <LockOutlined className={'prefixIcon'} />,
                }}
                placeholder={'密码: 123'}
                rules={[
                  {
                    required: true,
                    message: '请输入密码！',
                  },
                ]}
              />
              <div
                style={{
                  marginBlockEnd: 24,
                }}
              >
                <ProFormCheckbox noStyle name="autoLogin">
                  自动登录
                </ProFormCheckbox>
                <a
                  style={{
                    float: 'right',
                  }}
                  onClick={() => {
                    setLoginType('phone');
                  }}
                >
                  忘记密码
                </a>
              </div>
            </>
          )}
          {loginType === 'phone' && (
            <>
              <ArrowLeftOutlined
                style={{
                  fontSize: 20,
                  marginBottom: 12,
                  position: 'fixed',
                  left: 36,
                  top: 36,
                  zIndex: 99999,
                }}
                onClick={() => {
                  setLoginType('account');
                }}
              />
              <ProFormText.Password
                name="confirmpassword"
                fieldProps={{
                  size: 'large',
                  prefix: <LockOutlined className={'prefixIcon'} />,
                }}
                placeholder={'密码'}
                rules={[
                  {
                    required: true,
                    message: '请输入密码！',
                  },
                ]}
              />
              <ProFormText.Password
                name="password"
                fieldProps={{
                  size: 'large',
                  prefix: <LockOutlined className={'prefixIcon'} />,
                }}
                placeholder={'确认密码'}
                rules={[
                  {
                    required: true,
                    message: '请输入确认密码！',
                  },
                ]}
              />
            </>
          )}
        </LoginForm>
      </div>
    </div>
  );
};
